(function(pageName){

  sugarcane.module[pageName] = function(){
    $('.j-pagescreen').addClass('fn-hide');
    var urlParams = sugarcane.getUrlParams(),timeing = null,
      voteId = urlParams['id'];


    if ($('#j-screen-'+pageName+voteId).length) {
      var pageScreen = $('#j-screen-'+pageName+id);
      pageScreen.removeClass('fn-hide');
      var _scrollTop = pageScreen.data('scrolltop') || 0;
      setTimeout(function(){
        $(window).scrollTop(_scrollTop);
      }, 10);
      return false;
    }

    var pageScreen = $('<div class="j-pagescreen" id="j-screen-'+pageName+voteId+'"></div>');
    $('body').append(pageScreen);

    var voteObj = $( `
      <div class="app-vote">
        <div id="j-header" class="header">
          <div class="time-box">
            <div class="timebar"></div>
          </div>
        </div>
        <div class="tabbar">
          <div class="j-tab tabbar">
          <p>
              <span data-target="j-detail" class="j-tabcell tabcell tabcell-active">投票</span>
              <span data-target="j-leader" class="j-tabcell tabcell ">排名</span>
              <span data-target="j-rule" class="j-tabcell tabcell">规则</span>
            </p>
          </div>
        </div>
        
        <div class="tab j-detail tab-active">
          <div class="active-box">
            <p class="active-abstract fn-clear">
              已有<span id="j-joinnum">_</span>人参与
              <span id="j-activeinfo" class="btn btn-xs fn-hide fn-right">详情</span>
            </p>
            <div id="j-activeintro" class="introduct fn-hide"></div>
            <div id="j-votelist1" class="waterfall">
              <div class="leftfall"></div>
              <div class="rightfall"></div>
            </div>
            <div id="j-votelist" class="list"></div>
           </div>
        
      </div>
        <div class="tab j-leader"></div>
        <div class="tab j-rule">
        <div class="rule-box"></div>
        </div>
    `);

    $('body').find('.j-pagescreen').append(voteObj);

    var windowheight = $(window).height();
    var tabtop = $('.j-tab').offset().top;

    $(window).scroll(function(){
      var scrollTop = $(this).scrollTop(); //页面滚动的高度
      if(scrollTop >= tabtop){
        $('.j-tab').addClass('fixed');
      }else{
        $('.j-tab').removeClass('fixed');
      }
    });

    //tab显隐
    pageScreen.find('.j-tabcell').click(function () {
      var target = $(this).data('target');
      if(target != 'j-detail'){
         if(target == 'j-leader'){
          getRankList();
          // getRankList(function(resData){
          //   $('.j-leader').html(juicer($('#j-leadertpl').html(), {"data":resData}));
          //   var icon = ['first-icon', 'two-icon', 'three-icon'];
          //   var _count = 0,
          //     _order = 0;
          //   $('.j-leader .lead-box').each(function(){
          //     if ($(this).data('count') == _count) {
          //       $(this).data('order', _order);
          //     } else {
          //       _count = $(this).data('count');
          //       _order = $(this).data('order');
          //     }
          //   });
          //   $('.j-leader .lead-box').each(function(){
          //     var thisOrder = $(this).data('order');
          //     if (thisOrder < 3) {
          //       $(this).find('.left-info').addClass(icon[thisOrder]);
          //       $(this).find('.righttext').addClass('hoticon');
          //     } else {
          //       $(this).find('.left-info').html(thisOrder + 1);
          //     }
          //   });
          // });

        }
        $('body').css('background','#fff');
      }else{
       
        $('body').css('background','#000');
      }
      $(this).addClass('tabcell-active').siblings().removeClass('tabcell-active');
      $('.tab').removeClass('tab-active');
      $('.'+target).addClass('tab-active')
    });

    pageScreen.find('#j-activeinfo').click(function(){
      if( pageScreen.find('#j-activeintro').hasClass('fn-hide')){
        pageScreen.find(this).text('收起');
        pageScreen.find('#j-activeintro').removeClass('fn-hide')
      }else{
        pageScreen.find(this).text('详情');
        pageScreen.find('#j-activeintro').addClass('fn-hide');
      }
    });


     //dom模板
    var voteColumntpl = `
      <div>


      {@each optionList as item}
      <div class="j-card card-column" data-needlog="" data-hasdetail="" data-checked="" data-status="" data-id="\${item.id}">
        <div class="img-box  j-jumptodetail" >
          <img src="\${item.imageurl}">
          <div class="img-focus">
            <img src="\${item.imageurl}">
          </div>
          {@if item.optionseq < 9}
          <span class="idxlogo">0\${item.optionseq}</span>
          {@else}
          <span class="idxlogo">\${item.optionseq}</span>
          {@/if}
        </div>
        <div class="card-content">
          <p class="title  j-jumptodetail"><b></b>\${item.option}</p>
          <p class="detail"><span class="j-votenum">\${item.nums}</span>票</p>
          <div class="action">
            {@if votestatus == 1}
              {@if item.checked == 1}
              <span class="btn btn-block outbtn">感谢支持</span>
              {@else}
              <span class="j-votebtn btn btn-block" data-status="\${votestatus}" data-id="\${item.id}" data-needlog="\${needLogin}">投TA一票</span>
              {@/if}
            {@else if votestatus == 0}
            <span class="j-votebtn btn btn-block forbidbtn" data-status="\${votestatus}">暂未开始</span>
            {@else if votestatus == 2}
            <span class="j-votebtn btn btn-block forbidbtn" data-status="\${votestatus}">活动结束</span>
            {@/if}
          </div>
        </div>
      </div>
      {@/each}
      </div>
    `;
    var  leadertpl = `
      <div>
        {@each data as item, index}
        <div class="lead-box" data-order="\${index}" data-count="\${item.userCount}">
          <div class="left-info"></div>
          <div class="right-info media-info fn-clear">
            {@if item.imageurl}
            <img class="headimg" src="\${item.imageurl}">
            {@/if}
            <p>
              <span class="leadname ">\${item.option}</span>
              <span class="fn-right righttext">\${item.userCount}票</span>
            </p>
          </div>
        </div>
        {@/each}
      </div>
    `;

    voteShow();

    function voteShow(){
      sugarcane.ajaxApi({
        "url": "/interactive/voteDetail",
        "data": {"id": voteId,},
        "callback": function(res){
          if (res['code'] == 0) {
            clearInterval(timeing);

            // if($('#j-header').find('img').length){
            //   $('#j-header').find('img').attr('src',res.data['backgroundImg']);
            // }else{
            //   $('#j-header').append('<img src="'+res.data['backgroundImg']+'">');
            // }

            
            if(res.data['description']){
              pageScreen.find('#j-activeinfo').removeClass('fn-hide');
              pageScreen.find('#j-activeintro').html(res.data['description']);
            }
            
            pageScreen.find('#j-joinnum').html(res.data['participateNumber']);

            //根据type模板渲染0=二图，1=纯文字，2=左图右文，3=通栏
          // if(resData['type'] == '0'){
            pageScreen.find('#j-votelist1 .leftfall').html('');
            pageScreen.find('#j-votelist1 .rightfall').html('');
            var voteObj1 = juicer(voteColumntpl, res.data);
            $(voteObj1).find('.card-column').forEach(function(item,idx){
              var leftheight  = $('#j-votelist1 .leftfall').height();
              var rightheight = $('#j-votelist1 .rightfall').height();
              if(leftheight == rightheight || leftheight < rightheight){
                pageScreen.find('#j-votelist1 .leftfall').append(item);
              }else{
                pageScreen.find('#j-votelist1 .rightfall').append(item);
              }

            });

            //原两图标题省略样式
            // $('#j-votelist').html(juicer($('#j-votetpl1').html(), resData));

          // }


            gotime(res.data['startTime'], res.data['endTime']);
          } else {
            alert(res['message']);
          }
        }
      });
    }

    // 倒计时
    function gotime(startDate, endDate){
      var startDate = + new Date(Date.parse(startDate.replace(/-/g,  "/"))),
        endDate = + new Date(Date.parse(endDate.replace(/-/g,  "/"))),
        xtimes = 0;
      function timeFn(){
        var _time = 0,serverDate = null;
          serverDate = + new Date() + xtimes;
        if (serverDate < startDate) {
          _time = startDate - serverDate;
        } else if (serverDate < endDate) {
          _time = endDate - serverDate;
        } else {
          if (timeing) clearInterval(timeing);
        }
        if (_time == 0) {
          pageScreen.find('#j-header .timebar').html('');
          return false;
        }
        var _day = Math.floor(_time / (24 * 60 * 60 * 1000));
        _time = _time % (24 * 60 * 60 * 1000);
        var _hh = Math.floor(_time / (60 * 60 * 1000));
        _time = _time % (60 * 60 * 1000);
        var _mm = Math.floor(_time / (60 * 1000));
        _time = _time % (60 * 1000);
        var _ss = Math.floor(_time / 1000);
        var _html = '';
        _html += '<span>' + _day + '</span><span>天</span>';
        _html += '<span>' + _hh + '</span><span>时</span>';
        _html += '<span>' + _mm + '</span><span>分</span>';
        // if (_day > 0) _html += '<span>' + _day + '</span><span>天</span>';
        // if (_day > 0 || _hh > 0) _html += '<span>' + _hh + '</span><span>时</span>';
        // if (_day > 0 || _hh > 0 || _mm > 0) _html += '<span>' + _mm + '</span><span>分</span>';
        _html += '<span>' + _ss + '</span><span>秒</span>';
        pageScreen.find('#j-header .timebar').html(_html);
      }
      $.ajax({cache: false, success: function(data, status, xhr){
        xtimes = + new Date(xhr.getResponseHeader('Date')) - (+ new Date());
        timeing = setInterval(timeFn, 500);
      }});
    }

    function getRankList(){
      sugarcane.ajaxApi({
        "url": "/interactive/voteRanking",
        "data": {"id": voteId,},
        "callback": function(res){
          if (res['code'] == 0) {
            var leadobj = juicer(leadertpl, res);
            console.log(leadobj)
            pageScreen.find('.j-leader').html(juicer(leadertpl, res));
            var icon = ['first-icon', 'two-icon', 'three-icon'];
            var _count = 0,
              _order = 0;
            $('.j-leader .lead-box').each(function(){
              if ($(this).data('count') == _count) {
                $(this).data('order', _order);
              } else {
                _count = $(this).data('count');
                _order = $(this).data('order');
              }
            });
            $('.j-leader .lead-box').each(function(){
              var thisOrder = $(this).data('order');
              if (thisOrder < 3) {
                $(this).find('.left-info').addClass(icon[thisOrder]);
                $(this).find('.righttext').addClass('hoticon');
              } else {
                $(this).find('.left-info').html(thisOrder + 1);
              }
            });
          }
        }
      });
    }
    // //dom模板
    // var voteColumntpl = `
    //   {@each details as item}
    //   <div class="j-card card-column" data-needlog="${needLogin}" data-hasdetail="${item.hasDetail}" data-checked="${item.checked}" data-status="${votestatus}" data-id="${item.id}">
    //     <div class="img-box  j-jumptodetail" >
    //       <img src="${item.imageurl}">
    //       <div class="img-focus">
    //         <img src="${item.imageurl}">
    //       </div>
    //       {@if item.optionseq < 9}
    //       <span class="idxlogo">0${item.optionseq}</span>
    //       {@else}
    //       <span class="idxlogo">${item.optionseq}</span>
    //       {@/if}
    //     </div>
    //     <div class="card-content">
    //       <p class="title  j-jumptodetail"><b></b>${item.voteoptions}</p>
    //       <p class="detail"><span class="j-votenum">${item.userCount}</span>票</p>
    //       <div class="action">
    //         {@if votestatus == 1}
    //           {@if item.checked == 1}
    //           <span class="btn btn-block outbtn">感谢支持</span>
    //           {@else}
    //           <span class="j-votebtn btn btn-block" data-status="${votestatus}" data-id="${item.id}" data-needlog="${needLogin}">投TA一票</span>
    //           {@/if}
    //         {@else if votestatus == 0}
    //         <span class="j-votebtn btn btn-block forbidbtn" data-status="${votestatus}">暂未开始</span>
    //         {@else if votestatus == 2}
    //         <span class="j-votebtn btn btn-block forbidbtn" data-status="${votestatus}">活动结束</span>
    //         {@/if}
    //       </div>
    //     </div>
    //   </div>
    //   {@/each}
    // `;
      
  }
  sugarcane.module['state'][pageName] = 'load';
  sugarcane.module.callback(pageName);
}('votelist'));